<template>
    <div class="listDiv">
        <div class="searchDiv">
            <el-cascader v-model="obj.req.citys" :options="hebeicitys" class="search_select" clearable :props="{checkStrictly:true}" @change="(e)=>{obj.req.city = e?e[e.length-1]:''}" style="width:360px;" />
            <el-select v-model="obj.req.management_id" placeholder="所属管委会" class="search_select w180px" clearable>
                <el-option v-for="(item,index) in obj.management_all" :key="index" :label="item.name" :value="item.management_id" />
            </el-select>
            <el-select v-model="obj.req.garden_id" placeholder="所属园区" class="search_select w180px" clearable>
                <el-option v-for="(item,index) in obj.garden_all" :key="index" :label="item.name" :value="item.garden_id" />
            </el-select>
            <el-input clearable placeholder="匹配企业名称" v-model="obj.req.key" class="search_key" />
            <span class="btn search" @click="init">搜索</span>
            <span class="btn refresh" @click="obj.req.currentpage=1;init()"></span>
            <div class="searchRight">
            </div>
        </div>
        <div class="table_box"><div class="table_" id="tb">
            <ul class="head">
                <li class="mw300">企业名称</li>
                <li class="">所属园区</li>
                <li class="">所属管委会</li>
                <li class="mw200 wcen">注册时间</li>
                <li class="mw200 wcen">最后登录时间</li>
                <li class="wcen">激活员工数</li>
            </ul>
            <div class="body">
                <ul v-for="x in obj.ary" :key="x">
                    <li class="mw300">{{x.companyname}}</li>
                    <li class="">{{x.gardenname}}</li>
                    <li class="">{{x.managementname}}</li>
                    <li class="mw200 wcen">{{x.intime}}</li>
                    <li class="mw200 wcen">{{x.lastlogintime}}</li>
                    <li class="wcen">
                        <u class="base-color pointer" @click.prevent="staff(x)">{{x.cou}}</u>
                    </li>
                </ul>
            </div>
        </div>
        </div><Pager :value="obj.req" :init="init" />
        <el-dialog v-model="obj.drawer.staff" :title="obj.drawer.staffTitle" width="1000px" :close-on-click-modal="false" :destroy-on-close="true">
            <router-view @close="obj.drawer.staff = false" />
        </el-dialog>
    </div>
</template>

<script setup>
    import { reactive, getCurrentInstance, ref, toRefs, provide, computed, watch } from 'vue'
    import DateRange from '../../../../components/date_range.vue'
    import Pager from '../../../../components/pager.vue'
    let { proxy } = getCurrentInstance()

    let obj = reactive({
        drawer: {
            staff: false,
            staffTitle: "",
        },
        ary: [
            {id:1,name:"第一企业名称",management:"第一管委会",garden:"第一园区",intime:"2020-03-06 11:23:33",lastlogintime:"2020-03-10 09:33:21",state:"1"}
        ],
        req: {
            currentpage: 1,
            pagesize: 10,
            count: 0,
            key: "",
            intime_start:"",
            intime_end:"",
            management_id: "",
            garden_id: "",
            city: '',
            citys: ['1301','130110'],
        },
        management_all:[],
        garden_all: []
    });
    let init_befor = async () => {
        obj.management_all = await proxy.$utils.getManagement(proxy)
    }
    init_befor()
    let init = () => {
        let param = {
            ...obj.req,
            city: obj.req.city?obj.req.city:(obj.req.citys?obj.req.citys[obj.req.citys.length-1]:'')
        }
        proxy.$ajax({
            url: '/mp_companyList ',
            data: param,
            bfLoading: true
        }).then(d => {
            if(d.success){
                obj.ary = d.msg.list
                obj.req.count = d.msg.count
            }
        }).catch(() => { })
    }

    watch(
        () => obj.req.management_id,
        async (val) => {
            obj.garden_all = await proxy.$utils.getGarden(proxy,val)
            obj.req.garden_id = ""
        },
        { immediate: true, deep: true } //immediate表示第一次就输出，默认是false；deep表示深度监听，能监听到对像的内容变化
    )

    let editId = ref(0)
    provide("id", editId); //不能加.value
    let staff = (x) => {
        obj.drawer.staff = true
        obj.drawer.staffTitle = `员工信息列表`
        editId.value = x.company_id;
    }

    let setstate = x => {
        // proxy.ajax({
        //     url: '//setstate',
        //     data: { id: x.},
        //     bfLoading: true
        // }).then(d => {
        //     if(d.success){
        //         proxy.elMessageMixin("状态变更成功", 'success')
        //         init()
        //     }else{
        //         proxy.elMessageMixin(d.err, 'error')
        //     }
        // }).catch(() => { })
    }
</script>

<style scoped>
    .search_select { margin-left: 10px; width:100px; }
    .search_key { width:160px!important; }
    #tb ul li.li2 { width: 100px; }
    #tb ul li.li3 { width: 100px; }
    #tb ul li.li4 { width: 45px; }
    /*
    1<li>名称</li>
    2<li>行业</li>
    3<li>客户量</li>
    4<li>视频量</li>
    5<li>添加时间</li>
    6<li>到期时间</li>
    7<li>状态</li>
    8<li>操作</li>*/
</style>